<template>
	<view style="background-color: #f2f2f2;position: relative;">
		<view ref="fixedTop" style="position: fixed;top:0">
			<com-nav-bar :fixed="true" @clickLeft="back" left-icon="back" title="红包明细"></com-nav-bar>
			<u-tabs :list="tabsList" :is-scroll="false" :current="currentIndex" @change="tabChangeHandler" active-color="#FF7104" style="width:100vw;border-bottom: 1rpx solid #f2f2f2;padding-bottom: 20rpx;"></u-tabs>
		</view>
		
		<view style="background-color: #fff;padding-bottom: 100rpx;" :style="{marginTop:fixedTopHeight+'px'}">
			
			<view class="record-item" v-for="item in dataList" :key="item.id">
				<view v-line-clamp="2" style="font-size: 13pt;">{{ item.desc }}</view>
				<view style="display: flex;justify-content: center;font-size: 18pt;padding: 20rpx 0;" :style="{color:item.type == 1 ? 'green' : 'red' }">
					{{ updateStatus(item.type, item.integral) }}
				</view>
				<view style="font-size: 10pt; color:#a9a9a9; line-height: 60rpx;">
					<view v-if="item.extend" style="display: flex;align-items: center;">
						<span>账户红包：</span>
						<span>{{item.extend.before_static_integral}}</span>
						<span style="margin: 10px;font-size: 20px">→</span>
						<span style="color:green">{{item.extend.after_static_integral}}</span>
					</view>
				</view>
				
				<view style="margin-top: 20rpx;font-size: 10pt;color:#909399">{{ formatTimeToStr(item.created_at) }}</view>
			</view>
		
			<u-loadmore style="padding: 50rpx 0;" :status="loadStatus" />
		</view>
	
	</view>
</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	let that;
	export default{
		data(){
			return {
				tabsList:[
					{name:'全部',value:''},
					{name:'收入',value:'1'},
					{name:'支出',value:'2'},
				],
				currentIndex:0,
				fixedTopHeight:0,
				dataList:[],
				pagination:{
					page_count:0,
					current_page:1,
					total_count:0,
				},
				loadStatus:'nomore'
			}
		},
		computed:{
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000,'yyyy-MM-dd hh:mm:ss')
			},
		},
		beforeCreate(){
			that = this;
		},
		onShow(){
			this.$nextTick(function(){
				that.fixedTopHeight = Math.ceil(that.$refs.fixedTop.$el.clientHeight);
			})
		},
		onLoad(opt){
			this.type = opt.type ?? '';
			let findIndex = this.tabsList.findIndex(item => {
				return item.value == that.type
			})
			if(findIndex !== -1){
				this.currentIndex = findIndex;
			}
			this.getDataList()
		},
		methods:{
			back(){
				this.navBack()
			},
			tabChangeHandler(index){
				this.currentIndex = index;
				this.initData()
				this.getDataList()
			},
			async getDataList(){
				this.loadStatus = 'loading';
				let type = this.tabsList[this.currentIndex].value;
				const res = await this.$http.request({
					url: this.$api.user.red_package_records,
					method: 'get',
					data:{page:this.pagination.current_page,type},
					showLoading:true,
				});
				this.loadStatus = 'nomore';
				if(res.code !== 0){
					return this.$http.toast(res.msg);
				}
				this.dataList = this.dataList.concat(res.data.list);
				this.pagination = res.data.pagination;
				if (this.pagination.current_page < this.pagination.page_count) {
					this.loadStatus = 'loadmore';
				}
			},
			updateStatus(type, data) {
				return type == 1 ? `+${data}` : `-${data}`;
			},
			initData(){
				this.dataList = [];
				this.pagination = {
					page_count:0,
					current_page:1,
					total_count:0,
				};
			},
			
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.initData();
				this.getDataList();
			}, 1000);
		},
		onReachBottom() {
			let { current_page, page_count } = this.pagination;
			if (current_page >= page_count) {
				this.loadStatus = 'nomore';
				return;
			}
			this.pagination.current_page++;
			this.getDataList();
		}
	}
</script>

<style lang="scss">
	.record-item{
		margin: 0 20rpx;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid #ececec;
	}
</style>